---
layout: examples
title: SUI Mobile Demo
---
<header class="bar bar-nav">
  <h1 class="title">设置</h1>
</header>
<nav class="bar bar-tab">
  <a class="tab-item" href="/examples/baichuan/home" data-transition='slide-out'>
    <span class="icon icon-home"></span>
    <span class="tab-label">首页</span>
  </a>
  <a class="tab-item" href="/examples/baichuan/goods" data-transition='slide-out'>
    <span class="icon icon-app"></span>
    <span class="tab-label">商品</span>
  </a>
  <a class="tab-item active" href="#">
    <span class="icon icon-me"></span>
    <span class="tab-label">我的</span>
  </a>
</nav>
<div class="content">
  <!-- 这里是页面内容区 -->
  <div class="page-settings">
    <div class="list-block media-list person-card">
      <ul>
        <li>
          <div href="#" class="item-content">
            <div class="item-media"><img src="http://gqianniu.alicdn.com/bao/uploaded/i4//tfscom/i3/TB10LfcHFXXXXXKXpXXXXXXXXXX_!!0-item_pic.jpg_250x250q60.jpg" width="80"></div>
            <div class="item-inner">
              <div class="item-title-row">
                <div class="item-title">张小娴</div>
              </div>
              <div class="item-subtitle">Time is money</div>
              <div class="item-text"><strong>528</strong>关注</div>
            </div>
          </div>
        </li>
      </ul>
    </div>
    <div class="row text-center">
      <div class="col-25">
        <h4>12</h4>
        <div class="color-gray">待付款</div>
      </div>
      <div class="col-25">
        <h4>5</h4>
        <div class="color-gray">待发货</div>
      </div>
      <div class="col-25">
        <h4>2</h4>
        <div class="color-gray">待收货</div>
      </div>
      <div class="col-25">
        <h4>85</h4>
        <div class="color-gray">待评价</div>
      </div>
    </div>
    <div class="list-block list">
      <ul>
        <li class="item-content item-link">
          <div class="item-media"><i class="icon icon-settings"></i></div>
          <div class="item-inner">
            <div class="item-title">账号密码</div>
          </div>
        </li>
        <li class="item-content item-link">
          <div class="item-media"><i class="icon icon-me"></i></div>
          <div class="item-inner">
            <div class="item-title">个人资料</div>
          </div>
        </li>
        <li class="item-content item-link">
          <div class="item-media"><i class="icon icon-message"></i></div>
          <div class="item-inner">
            <div class="item-title">消息通知</div>
          </div>
        </li>
        <li class="item-content item-link">
          <div class="item-media"><i class="icon icon-star"></i></div>
          <div class="item-inner">
            <div class="item-title">我的收藏</div>
          </div>
        </li>
        <li class="item-content item-link">
          <div class="item-media"><i class="icon icon-friends"></i></div>
          <div class="item-inner">
            <div class="item-title">帮助中心</div>
          </div>
        </li>
      </ul>
    </div>
    <div class="content-block">
      <a href="/examples/baichuan/index.html" data-transition='slide-out' class="button button-big button-fill button-danger">退出登录</a>
    </div>
  </div>
</div>
